<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title th:text="${data.spu.name}"></title>
    <link rel="shortcut icon" href="/img/logo.ico"/>

    <link rel="stylesheet" type="text/css" href="/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="/css/pages-item.css"/>
    <link rel="stylesheet" type="text/css" href="/css/pages-zoom.css"/>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>
<div class="py-container">
    <div id="item">
        <!--product-info-->
        <div class="product-info">
            <div class="fl preview-wrap">
                <!--放大镜效果-->
                <div class="zoom">
                    <!--默认第一个预览-->
                    <div id="preview" class="spec-preview">
                        <span class="jqzoom"><img th:jqimg="${data.imageList[0]}"
                                                  th:src="@{${data.imageList[0]}}"/></span>
                    </div>
                    <!--下方的缩略图-->
                    <div class="spec-scroll">
                        <a class="prev">&lt;</a>
                        <!--左右按钮-->
                        <div class="items">
                            <ul>
                                <li th:each="img:${data.imageList}"><img th:src="@{${img}}" th:bimg="${img}"
                                                                         onmousemove="preview(this)"/></li>
                            </ul>
                        </div>
                        <a class="next">&gt;</a>
                    </div>
                </div>
            </div>

            <div class="fr itemInfo-wrap" id="itemArray">
                <div class="sku-name">
                    <h4 th:text="${data.skuList[0].name}"></h4>
                </div>
                <div class="news"><span th:text="${data.spu.caption}"></span></div>
                <div class="summary">
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>价　　格</i>
                        </div>
                        <div class="fl price">
                            <i>¥</i>
                            <em th:text="${data.skuList[0].price}"></em>
                            <span>降价通知</span>
                        </div>
                        <div class="fr remark">
                            <i>累计评价</i><em th:text="${data.spu.commentNum}"></em>
                        </div>
                    </div>
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>促　　销</i>
                        </div>
                        <div class="fl fix-width">
                            <i class="red-bg">加价购</i>
                            <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
                        </div>
                    </div>
                </div>
                <div class="support">
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>支　　持</i>
                        </div>
                        <div class="fl fix-width">
                            <em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em>
                        </div>
                    </div>
                    <div class="summary-wrap">
                        <div class="fl title">
                        </div>
                        <div class="fl fix-width">
                            <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
                        </div>
                    </div>
                </div>
                <div class="clearfix choose">
                    <div id="specification" class="summary-wrap clearfix">
                        <!--循环MAP-->
                        <dl th:each="spec,specStat:${data.specificationList}">
                            <dt>
                                <div class="fl title">
                                    <i th:text="${spec.key}"></i>
                                </div>
                            </dt>
                            <dd th:each="arrValue:${specStat.current.value}">
                                <a href="javascript:;" th:v-bind:class="|{selected:sel('${spec.key}','${arrValue}')}|"
                                   th:@click="|selectSpecification('${spec.key}','${arrValue}')|">
                                    <i th:text="${arrValue}"></i>
                                    <span title="点击取消选择">&nbsp;</span>
                                </a>
                            </dd>
                        </dl>
                    </div>
                    <div class="summary-wrap">
                        <div class="fl title">
                            <div class="control-group">
                                <div class="controls">
                                    <input autocomplete="off" type="text" v-model="num" class="itxt"/>
                                    <a href="javascript:void(0)" @click="addNum()" class="increment plus">+</a>
                                    <a href="javascript:void(0)" @click="subNum()" class="increment mins">-</a>
                                </div>
                            </div>
                        </div>
                        <div class="fl">
                            <ul class="btn-choose unstyled">
                                <li>
                                    <a @click="addCart()"
                                       class="sui-btn  btn-danger addshopcar">加入购物车</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部栏位 -->
        <!--页面底部-->
        <div class="clearfix footer">
            <div class="py-container">
                <div class="footlink">
                    <div class="Mod-service">
                        <ul class="Mod-Service-list">
                            <li class="grid-service-item intro  intro1">

                                <i class="serivce-item fl"></i>
                                <div class="service-text">
                                    <h4>正品保障</h4>
                                    <p>正品保障，提供发票</p>
                                </div>

                            </li>
                            <li class="grid-service-item  intro intro2">

                                <i class="serivce-item fl"></i>
                                <div class="service-text">
                                    <h4>正品保障</h4>
                                    <p>正品保障，提供发票</p>
                                </div>

                            </li>
                            <li class="grid-service-item intro  intro3">

                                <i class="serivce-item fl"></i>
                                <div class="service-text">
                                    <h4>正品保障</h4>
                                    <p>正品保障，提供发票</p>
                                </div>

                            </li>
                            <li class="grid-service-item  intro intro4">

                                <i class="serivce-item fl"></i>
                                <div class="service-text">
                                    <h4>正品保障</h4>
                                    <p>正品保障，提供发票</p>
                                </div>

                            </li>
                            <li class="grid-service-item intro intro5">

                                <i class="serivce-item fl"></i>
                                <div class="service-text">
                                    <h4>正品保障</h4>
                                    <p>正品保障，提供发票</p>
                                </div>

                            </li>
                        </ul>
                    </div>
                    <div class="clearfix Mod-list">
                        <div class="yui3-g">
                            <div class="yui3-u-1-6">
                                <h4>购物指南</h4>
                                <ul class="unstyled">
                                    <li>购物流程</li>
                                    <li>会员介绍</li>
                                    <li>生活旅行/团购</li>
                                    <li>常见问题</li>
                                    <li>购物指南</li>
                                </ul>

                            </div>
                            <div class="yui3-u-1-6">
                                <h4>配送方式</h4>
                                <ul class="unstyled">
                                    <li>上门自提</li>
                                    <li>211限时达</li>
                                    <li>配送服务查询</li>
                                    <li>配送费收取标准</li>
                                    <li>海外配送</li>
                                </ul>
                            </div>
                            <div class="yui3-u-1-6">
                                <h4>支付方式</h4>
                                <ul class="unstyled">
                                    <li>货到付款</li>
                                    <li>在线支付</li>
                                    <li>分期付款</li>
                                    <li>邮局汇款</li>
                                    <li>公司转账</li>
                                </ul>
                            </div>
                            <div class="yui3-u-1-6">
                                <h4>售后服务</h4>
                                <ul class="unstyled">
                                    <li>售后政策</li>
                                    <li>价格保护</li>
                                    <li>退款说明</li>
                                    <li>返修/退换货</li>
                                    <li>取消订单</li>
                                </ul>
                            </div>
                            <div class="yui3-u-1-6">
                                <h4>特色服务</h4>
                                <ul class="unstyled">
                                    <li>夺宝岛</li>
                                    <li>DIY装机</li>
                                    <li>延保服务</li>
                                    <li>品优购E卡</li>
                                    <li>品优购通信</li>
                                </ul>
                            </div>
                            <div class="yui3-u-1-6">
                                <h4>帮助中心</h4>
                            </div>
                        </div>
                    </div>
                    <div class="Mod-copyright">
                        <ul class="helpLink">
                            <li>关于我们<span class="space"></span></li>
                            <li>联系我们<span class="space"></span></li>
                            <li>关于我们<span class="space"></span></li>
                            <li>商家入驻<span class="space"></span></li>
                            <li>营销中心<span class="space"></span></li>
                            <li>友情链接<span class="space"></span></li>
                            <li>关于我们<span class="space"></span></li>
                            <li>营销中心<span class="space"></span></li>
                            <li>友情链接<span class="space"></span></li>
                            <li>关于我们</li>
                        </ul>
                        <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
                        <p>京ICP备08001421号京公网安备110108007702</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页面底部END-->
<!--侧栏面板开始-->
<div class="J-global-toolbar">
    <div class="toolbar-wrap J-wrap">
        <div class="toolbar">
            <div class="toolbar-panels J-panel">

                <!-- 购物车 -->
                <div style="visibility: hidden;" class="J-content toolbar-panel tbar-panel-cart toolbar-animate-out">
                    <h3 class="tbar-panel-header J-panel-header">
                        <a href="" class="title">
                            <i></i>
                            <em class="title">购物车</em>
                        </a>
                        <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('cart');"></span>
                    </h3>
                    <div class="tbar-panel-main">
                        <div class="tbar-panel-content J-panel-content">
                            <div id="J-cart-tips" class="tbar-tipbox hide">
                                <div class="tip-inner">
                                    <span class="tip-text">还没有登录，登录后商品将被保存</span>
                                    <a href="#none" class="tip-btn J-login">登录</a>
                                </div>
                            </div>
                            <div id="J-cart-render">
                                <!-- 列表 -->
                                <div id="cart-list" class="tbar-cart-list">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 小计 -->
                    <div id="cart-footer" class="tbar-panel-footer J-panel-footer">
                        <div class="tbar-checkout">
                            <div class="jtc-number">
                                <strong class="J-count" id="cart-number">0</strong>件商品
                            </div>
                            <div class="jtc-sum"> 共计：
                                <strong class="J-total" id="cart-sum">¥0</strong>
                            </div>
                            <a class="jtc-btn J-btn" href="#none" target="_blank">去购物车结算</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="toolbar-header"></div>

            <!-- 侧栏按钮 -->
            <div class="toolbar-tabs J-tab">
                <div onclick="cartPanelView.tabItemClick('cart')" class="toolbar-tab tbar-tab-cart" data="购物车"
                     tag="cart">
                    <i class="tab-ico"></i>
                    <em class="tab-text"></em>
                    <span class="tab-sub J-count " id="tab-sub-cart-count">0</span>
                </div>
            </div>

            <div class="toolbar-footer">
                <div class="toolbar-tab tbar-tab-top">
                    <a href="#">
                        <i class="tab-ico  "></i>
                        <em class="footer-tab-text">顶部</em>
                    </a>
                </div>
                <div class="toolbar-tab tbar-tab-feedback">
                    <a href="#" target="_blank">
                        <i class="tab-ico"></i>
                        <em class="footer-tab-text ">反馈</em>
                    </a>
                </div>
            </div>

            <div class="toolbar-mini"></div>

        </div>

        <div id="J-toolbar-load-hook"></div>

    </div>
</div>
<script th:inline="javascript">
    var item = new Vue({
        el: '#itemArray',
        data: {
            skuList: [[${data.skuList}]],   //SKU集合
            sku: {},                     //当前选中的sku
            spec: [[${data.specificationList}]],                   //选中的sku的规格
            num: 1,
            username: [[${username}]]
        },
        methods: {
            //是否绑定selected样式
            sel: function (name, value) {
                if (this.spec == undefined) {
                    return false;
                }

                if (this.spec[name] == value) {
                    return true;
                } else {
                    return false;
                }
            },

            //选择切换
            selectSpecification: function (specName, specValue) {
                //选中的spec信息
                this.$set(this.spec, specName, specValue);
                //循环匹配
                for (var i = 0; i < this.skuList.length; i++) {
                    //匹配规格是否相同，如果相同，则表明选中的是该SKU
                    if (this.matchObject(JSON.parse(this.skuList[i].spec), this.spec)) {
                        //深克隆
                        this.sku = JSON.parse(JSON.stringify(this.skuList[i]));
                        return;
                    }
                }

                //如果上面执行完毕，没有找到SKU，则提示下架操作
                this.sku.id = 0;
                this.sku.name = '提示:该商品已经下架';
                this.sku.price = 0;
            },

            //判断2个JSON是否是相同的JSON数据
            matchObject: function (map1, map2) {
                //循环一个map
                for (var key in map1) {
                    //获取当前循环的map的key,再获取当前key的值
                    let m1v = map1[key];
                    //获取另一个map相同key的值
                    let m2v = map2[key];
                    //不同，则返回false，表明不相同
                    if (m1v != m2v) {
                        return false;
                    }
                }
                return true;
            },

            //加入购物车
            addCart: function () {
                location.href = "http://192.168.1.6:18086/wcart/add?id=" + this.sku.id + "&num=" + this.num + "&username=" + this.username;
            },
            // +
            addNum: function () {
                this.num++;
            },
            //-
            subNum: function () {

                if (this.num == 1) {
                    //this.num = 1;
                    alert("还买不买");
                } else {
                    this.num--;
                }

            }
        },
        created: function () {
            //默认选中第1个SKU,深克隆
            this.sku = JSON.parse(JSON.stringify(this.skuList[0]));
            //第1个SKU的规格,深克隆
            this.spec = JSON.parse(this.skuList[0].spec);
        }
    })
</script>

<script type="text/javascript" src="/js/all.js"></script>
<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
</body>

</html>